<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商品详情</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/main.css" />
<!--[if lt IE 9]>
<script src="../js/html5.js "></script >
<script src="../js/respond.min.js "></script >
<![endif]-->
<script src="../js/jquery.js"> </script>
<script src="../js/base.js"></script>
<script src="../js/common.js"></script>
</head>

<body>
        
<section class="bg toph">
	<table class="pubtip">
    	<tr>
        	<td><img src="../images/arrowtipleft.png"></td>
            <td>商品详情</td>
            <td><img src="../images/logo.png"></td>
        </tr>
    </table>
</section>

<section class="bg detailstable screenh" data-bottom="40" data-top="0">

    <ul class="detailsturn" id="turn">
    	<li><img src="../images/logo.png" alt="1">1</li>
    	<li><img src="../images/logo.png" alt="2"></li>
    	<li><img src="../images/logo.png" alt="3"></li>
    	<li><img src="../images/logo.png" alt="4"></li>
    	<li class="on"><img src="../images/logo.png" alt="5"></li>
        <span class="num"><span>1</span>/5</span>
    </ul>

	<div class="table">
    	<ul>
        	<li class="head"><span class="name">1212</span><span class="name">规格：</span></li>
            <li><p>选取整只鱿鱼经过加工处理后（去皮、去眼、去内脏）、熟制后经经研发秘制调配香辣酱料调味制作，鱿鱼软韧适中，香辣过瘾、辛香沁脾。</p></li>
        	<li>口味：xxxxxx</li>
        </ul>
    </div>
	<div class="table">
    	<table>
        	<tr class="head">
            	<td>件数</td>
            	<td>单价</td>
            	<td>促销</td>
            </tr>
            <tr>
            	<td>1</td>
            	<td>2</td>
            	<td>3</td>
            </tr>
            <tr>
            	<td>1</td>
            	<td>2</td>
            	<td>3</td>
            </tr>
        </table>
    </div>
    <div class="table">
    	<div class="dt">价格：</div>
    	<div class="dd"><span class="price">¥600元</span></div>
    	<div class="dt">规格：</div>
    	<div class="dd"><span class="type">12</span><span class="type on">12</span></div>
    	<div class="dt">数量：</div>
    	<div class="dd"><div class="num"><span data-span="-1">-</span><input data-num="2" type="text"><span data-span="1">+</span></div></div>
    </div>
    <h2>
        新品推荐<a href=""><img src="../images/arrowtipright.png"></a>
    </h2>
    <div class="index">
        <ul class="product">
        	<div class="head">新品推荐</div>
            <li> 
                <img src="../images/banner.jpg">
                农贸
            </li>
            <li> 
                <img src="../images/banner.jpg">
                农贸
            </li>
            <li> 
                <img src="../images/banner.jpg">
                农贸
            </li>
            <li> 
                <img src="../images/banner.jpg">
                农贸
            </li>
            <li> 
                <img src="../images/banner.jpg">
                农贸
            </li>
            <li> 
                <img src="../images/banner.jpg">
                农贸
            </li>
            <li> 
                <img src="../images/banner.jpg">
                农贸
            </li>
            <li> 
                <img src="../images/banner.jpg">
                农贸
            </li>
            <li> 
                <img src="../images/banner.jpg">
                农贸
            </li>
            <li> 
                <img src="../images/banner.jpg">
                农贸
            </li>
            <li> 
                <img src="../images/banner.jpg">
                农贸
            </li>
            <li> 
                <img src="../images/banner.jpg">
                农贸
            </li>
        </ul>
    </div>
</section>


<table class="shopcart2 bottomh">
	<tr>
    	<td>
        	<img src="../images/personblack.png">
        </td>
    	<td>
        	<img src="../images/carblack.png">
            <span>0</span>
        </td>
        <td>
        	加入购物车
        </td>
        <td>
        	去结算
        </td>
    </tr>
</table><script>
	$(".detailstable .table .type").click(function(){
		$(this).addClass("on").siblings().removeClass("on");
	})
	$(".detailstable .table .num input").val($(".detailstable .table .num input").attr("data-num"));
	$(".detailstable .table .num span").click(function(){
		var span = parseInt($(this).attr("data-span"));
		var num = parseInt($(".detailstable .table .num input").val())+span;
		if( num < 1){ num = 1;}
		$(".detailstable .table .num input").val(num);
	})
	
	var product = $(".product").width();
	var productp = 10;
	var productimg = product/3-2*productp;
	$(".product img").width(productimg);
	$(".product img").height(productimg);
	
	
 	function turnimgmove(a){
		turnimgtimestop();
		if(a){
			turnimg();
		}
		else{
			turnimgreduce();	
		}
		timeturn = setTimeout("turnimgtime()",4000);;
	}
	$(".detailsturn").height($(".detailsturn").width());
	function turnimg(){
		
		var $ul = $(".detailsturn");
		var $li = $ul.find("li");
		var $span = $(".detailsturn .num span");
		var width = $ul.width();
		$ul.height(width);
		var num = $ul.find(".on").index();
		var numoldup = (num-1+5)%5;
		var numon = (num+1+5)%5;
		var numnext = (num+2+5)%5;
		var $numoldup = $li.eq(numoldup);
		var $liup = $li.eq(num);
		var $lion = $li.eq(numon);
		var $linext = $li.eq(numnext);
		$numoldup.removeClass("up");
		$liup.removeClass("on").addClass("up");
		$lion.removeClass("next").addClass("on");
		$linext.addClass("next"); 
		$span.html((numon+1));
	}
	function turnimgreduce(){
		
		var $ul = $(".detailsturn");
		var $li = $ul.find("li");
		var $span = $(".detailsturn .num span");
		var width = $ul.width();
		$ul.height(width);
		var num = $ul.find(".on").index();
		var numup = (num-2+5)%5;
		var numoldup = (num-1+5)%5;
		var numnext = (num+1+5)%5;
		var $liupold = $li.eq(numoldup);
		var $liup = $li.eq(numup);
		var $lion = $li.eq(num);
		var $linext = $li.eq(numnext);
		$liup.addClass("up");
		$liupold.removeClass("up").addClass("on");
		$lion.removeClass("on").addClass("next");
		$linext.removeClass("next"); 
		$span.html((numoldup+1));
	}
	var timeturn;
	var turnimgtime = function turnimgtime(){
		turnimg();
		timeturn = setTimeout("turnimgtime()",4000);
	}
	var turnimgtimestop = function turnimgtimestop() {
		clearTimeout(timeturn);
		return ;
	}
	turnimgtime();
    (function (){

        var LSwiperMaker = function(o){ 
 
            var that = this;
            this.config = o;
            this.control = false;
            this.sPos = {};
            this.mPos = {};
            this.dire;
     
            // this.config.bind.addEventListener('touchstart', function(){ return that.start(); } ,false);
            // 这样不对的，event对象只在事件发生的过程中才有效;
            this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
            this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
            this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);
 
        }
 
        LSwiperMaker.prototype.start = function(e){
             
             var point = e.touches ? e.touches[0] : e;
             this.sPos.x = point.screenX;
             this.sPos.y = point.screenY;
 
        }
        LSwiperMaker.prototype.move = function(e){  
 
            var point = e.touches ? e.touches[0] : e;
            this.control = true;
            this.mPos.x = point.screenX;
            this.mPos.y = point.screenY;
 
        }
 
        LSwiperMaker.prototype.end = function(e){
 

            this.config.dire_h  && (!this.control ? this.dire = null : this.mPos.x > this.sPos.x ? this.dire = 'R' : this.dire = 'L')
            this.config.dire_h  || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U')

			
			
			this.control = false;
            this.config.backfn(this);
 
        }
 
        window.LSwiperMaker = LSwiperMaker;
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突
 
    }())
 
    var a = new LSwiperMaker({
            bind:document.getElementById("turn"),  // 绑定的DOM对象
            dire_h:true,     //true 判断左右， false 判断上下
               //回调事件
			backfn:function(o){    //回调事件
			
			//console.log(o.dire=='R');
			turnimgmove(o.dire=='L');
			}
	
    })
 </script>

</body>
</html>
